<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '实践云课堂',
  },
}
</route>

<script setup>
import { judgeShowImage, uniNavigateTo } from '@/utils'
import PracticeApi from '@/service/practice'
import { useDictStore } from '@/store/dict'
import { getDictDetail, dictMap } from '@/service/dict'

const dictStore = useDictStore()

const menuList = ref([])
const activeMenu = ref('')

const getDict = async () => {
  const { code, result } = await getDictDetail(dictMap.lessonType)
  return code === 200 && result ? result : []
}
const initDict = async () => {
  const { lessonType } = dictStore.dictData
  let dictItem = lessonType
  if (!lessonType) {
    dictItem = await getDict()
  }
  menuList.value = [{ label: '全部', value: '' }, ...dictItem]
  activeMenu.value = menuList.value[0].value
}
initDict()

// const menuList = computed(() => {
//   return [{ label: '全部', value: '' }, ...dictStore.dictData.lessonType]
// })

// const activeMenu = ref(menuList.value[0].value)

const checkMenu = (item) => {
  activeMenu.value = item.value
  refreshList()
}

/** ----------- 分页加载 start --------- */
const pageObj = ref({
  pageNo: 1,
  pageSize: 10,
})
const scrollState = reactive({
  refresherTriggered: false,
  dataList: [],
  loadState: 'loading',
})

const getDataList = async () => {
  if (scrollState.loadState === 'finished') return
  try {
    const params = {
      ...pageObj.value,
      type: activeMenu.value,
      column: 'createTime',
      order: 'desc',
    }
    const { code, result } = await PracticeApi.getCoursePage(params)
    if (code === 200 && result) {
      const { records, pages } = result
      if (records?.length) {
        scrollState.dataList = [...scrollState.dataList, ...records]
      }
      if (pageObj.value.pageNo < pages) {
        pageObj.value.pageNo++
      } else {
        scrollState.loadState = 'finished'
      }
    } else {
      scrollState.loadState = 'error'
    }
  } catch (e) {
    scrollState.loadState = 'error'
  }
}

const reset = () => {
  pageObj.value.pageNo = 1
  scrollState.dataList = []
  scrollState.loadState = 'loading'
}

const onRefresherrefresh = async () => {
  scrollState.refresherTriggered = true
  await refreshList()
  scrollState.refresherTriggered = false
}

const refreshList = async () => {
  try {
    uni.showLoading()
    reset()
    await getDataList()
  } finally {
    uni.hideLoading()
  }
}
refreshList()
/** ----------- 分页加载 end --------- */
</script>

<template>
  <view class="flex">
    <view class="menu-list">
      <view
        v-for="item in menuList"
        :key="item.value"
        class="menu-item"
        :class="{ active: activeMenu === item.value }"
        @click="checkMenu(item)"
      >
        {{ item.label }}
      </view>
    </view>
    <scroll-view
      class="lesson-list"
      scroll-y
      refresher-enabled
      enable-back-to-top
      :refresher-triggered="scrollState.refresherTriggered"
      @refresherrefresh="onRefresherrefresh"
      @scrolltolower="getDataList"
    >
      <template v-if="scrollState.dataList.length > 0">
        <view
          v-for="item in scrollState.dataList"
          :key="item.id"
          class="lesson-item"
          @click="
            uniNavigateTo(
              `/pages-sub/practice-class/detail/index?id=${item.id}&resourceType=${item.resourceType}`,
            )
          "
        >
          <image
            class="w-180rpx h-120rpx rounded-16rpx mr-16rpx"
            :src="judgeShowImage(item.coverUrl)"
            mode="aspectFill"
          />
          <view class="py-2rpx flex flex-col justify-between">
            <view class="lesson-item-title ellipsis-2">{{ item.name }}</view>
            <view class="lesson-item-desc">
              <wd-icon
                name="view"
                size="28rpx"
                color="#777"
              ></wd-icon>
              <text class="ml-4rpx">{{ item.readCount }}</text>
            </view>
          </view>
        </view>
        <wd-loadmore
          finished-text="没有更多了"
          :state="scrollState.loadState"
          @reload="getDataList"
        />
      </template>
      <wd-status-tip
        v-else
        image="content"
        tip="暂无内容"
      />
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.menu-list {
  flex-shrink: 0;
  width: 200rpx;
  height: 100vh;
  padding: 24rpx 0;
  background: #fff;
  box-sizing: border-box;

  .menu-item {
    position: relative;
    height: 80rpx;
    padding: 0 40rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    color: $uni-text-color-grey;

    &.active {
      background: rgba(249, 143, 24, 0.2);
      color: #f98f18;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 8rpx;
        height: 100%;
        background: #f98f18;
      }
    }
  }
}

.lesson-list {
  flex: 1;
  padding: 24rpx 16rpx;
  height: 100vh;
  background: #f4f7fc;
  box-sizing: border-box;

  .lesson-item {
    display: flex;
    align-items: stretch;
    padding: 16rpx;
    margin-bottom: 24rpx;
    background: #fff;
    border-radius: 16rpx;

    &-title {
      font-size: 28rpx;
      font-weight: 500;
      color: $uni-text-color;
    }

    &-desc {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: $uni-text-color-grey;
    }
  }
}
</style>
